<template>
  <div id="viewNostro">
    <div class="homeTitle">存放同业交易申请</div>
    
    <div class="tableBox">
      <div>
        <div class="tableTitle">申请人信息： </div>
      <el-form class="formlist" :model="formData1"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList1" :key="item.label" :label="item.label" :prop="item.prop">
                    {{formData1[item.prop]}}
                    </el-form-item>
           </el-form>
      </div>
       <div>
        <div class="tableTitle">交易类型及方式：</div>
        <formList :formData = 'TypeData' :isdisabled='true' :formList = 'TypeList' parentClass = 'formll'></formList>
      </div>
       <div v-if="showsec">
         <div class="tableTitle">交易信息： </div>
          <el-form class="formlist"  :model="formData2"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList2" :key="item.label" :label="item.label" :prop="item.prop">
                      {{formData2[item.prop] ? formData2[item.prop] : '暂无数据'}}
                    </el-form-item>
           </el-form>
      </div>
    
      <div v-else>
        <div class="tableTitle">交易信息：</div>
        <formList :isdisabled = 'true' :formData = 'formData'  :formList = 'formList' parentClass = 'formll'></formList>
    </div>
   <div style="width:98%">
        <div class="tableTitle">审核记录</div>
        <el-table ref="singleTable" :data="recordShen" border  style="width: 100%">
            <el-table-column prop="userRole" label="审核角色" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
            <el-table-column prop="content" label="审核意见" align="center"></el-table-column>
            <el-table-column prop="createTime" label="审核时间" align="center"></el-table-column>
          </el-table>
       </div>

        <div style="width:98%" v-show="isUpload" class="shengl">
        <div class="tableTitle" >省联社授权节点</div>
             <table>
          <tr style="height:50px;background:rgba(53,58,58,0.8)">
            <!-- <td style="width:33%"><span style="color:red">*</span>文件描述</td> -->
            <td>文件名称</td>
            <td>操作</td>
          </tr>
          
           <tr v-for="(file, index) in fileList" :key="index">
            <!-- <td>{{file.info}}</td> -->
            
            <td>{{file.name}}</td>
            <td>  
                   <el-button v-if="canUpload" type="text" @click="delFile(index)">删除</el-button>
                    <a v-else :href='aurl+ file.filename + "&name=" + file.name' style="font-size:14px;color: #409EFF"  :download="file.name">下载</a>
              </td> 
          </tr>
          <tr v-show="canUpload">
            <!-- <td>
              <el-input placeholder="请输入文件描述" v-model="filename"></el-input>
            </td> -->
            <td>
                 <el-upload
                  class="upload-demo"
                  :action="fileupload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-success="uploadSuccess"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small"  type="text">上传附件</el-button>
                </el-upload>
            </td>
            <td>
            </td>
          </tr>
             </table>
       
      </div>
        <div class="riskTip" style="width:98%">
            <div class="fxtq tableTitle">申请事由：</div>
            <div class="fxcon">
              <p>{{reason}}</p>
            </div>
        </div>
         <div class="riskTip" style="width:98%" v-show="tishiMessage != ''">
            <div class="fxtq tableTitle">风险提醒：</div>
            <div class="fxcon">
                <el-input type="textarea" v-model="tishiMessage"></el-input>
            </div>
        </div>
      <el-dialog title="选择下一待办人" :visible.sync="nextManager" width="30%" center>
      <div v-show="nextManager">

           <el-radio-group v-model="nextUserId">
            <el-radio v-for="item in tableData" :key="item.id"  :label="item.id">
              <span class="user_name">{{item.name}}</span>
              <span class="user_part">{{item.department}}</span>
              </el-radio>
          </el-radio-group>
          
        </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addApply" size="small">确认选中</el-button>
          <el-button @click="cancleNext"  size="small">取 消</el-button>
      </span>
      </el-dialog>
      <div class="btn">
        <el-button type="primary"  size="small" v-show="this.$route.query.view != 'view'"  @click="submitPost">{{btntext}}</el-button>
        <el-button type="primary"  size="small" v-show="this.$route.query.currentRole != '交易员' && this.$route.query.view != 'view'"  @click="nopass">审核不通过</el-button>
        <el-button type="primary" @click="goback" size="small">取消</el-button>
      </div>
    </div>
   
  </div>
</template>
<script>
export default {
  name: "accountDetail",
  data() {
    return {
      nextManager: false,
      tableData: [],
      nextUserId: '',
      canUpload: true,
      step: 1,
      isAuthorization: 2,
      reason: '',
      rules:{

      },
      btntext: '审核通过',
      recordShen: [],
      tishiMessage:'',
      formList1: [
        {label: '机构编号', prop: 'no', value:''},{label: '机构名称', prop: 'bank', value:''},
        {label: '操作员工号', prop: 'jobNum', value:''},{label: '操作员姓名', prop: 'name', value:''},
      ],

      formData1: {},
      TypeList: [
        {label : '交易类型', value:'hhh', prop:'transactionType', select: true,
        options: [
            {label: '存入', value: '存入'},
            {label: '存出', value: '存出'}
        ]},
        {label : '存款方式', value:'hhh', prop:'depositMethod', select: true,
        options: [
            {label: '活期', value: '活期'},
            {label: '定期', value: '定期'}
        ]},
      ],
      TypeData: {
        depositMethod: '活期'
      },
      formList2: [
        {label: '活期账号', prop: 'currentAccount', value:'', btn: true},{label: '机构标识', prop: 'agencyId', value:''},
        {label: '账户名称', prop: 'accountName', value:''},{label: '机构类型', prop: 'agencyType', value:''},
         {label: '机构名称', prop: 'agencyName', value:''},{label: '开户行', prop: 'accountBank', value:''},
        {label: '计息基础', prop: 'interestBase', value:''},
        {label: '利率（%）', prop: 'interestRate', value:''},{label: '账户余额(元)', prop: 'accountBalance', value:''},
        {label: ' 本次交易金额(元)', prop: 'tradeValue', value:'', input: true}
      ],
      formData2: {},
    
      formData:{
        currency: 'CNY',
        dan: '日'
      },
      formList: [
        {label : '机构标识', value:'hhh', prop:'agencyId', select: true,
         options: [
            {label: '系统外', value: '系统外'},
            {label: '系统内', value: '系统内'}
           
        ]},
        {label : '机构类型', value:'hhh', prop:'agencyType', select: true},
         
         {label : '机构名称', value:'是', prop:'agencyName',input: true},
        {label : '开户行', value:'是', prop:'accountBank',input: true},
        {label : '本次交易金额(元)', value:'是', prop:'tradeValue',input: true},
        {label : '交易利率（%）', value:'是', prop:'interestRate',input: true},
        {label : '起息日期', value:'是', prop:'startInterestDate',date: true}, 
        
         {label : ' 期限', value:'hhh', prop:'term', prop2: 'dan', inputsel: true,
         options: [
            {label: '日', value: '日'},
            // {label: '月', value: '月'},
            // {label: '年', value: '年'}
        ]},
        {label : '到期日期', value:'是', prop:'dueDate',date: true}, 
       
        {label : '计息基础', value:'hhh', prop:'interestBase', select: true,
         options: [
            {label: 'A/360', value: 'A/360'},
            {label: 'A/365', value: 'A/365'}
        ]},
         {label : '结息方式', value:'hhh', prop:'interestMethod', select: true,
         options: [
            {label: '中途结息', value: '中途结息'},
            {label: '利随本清', value: '利随本清'}
        ]},
        {label : '结息频率', value:'hhh', prop:'interestFreq', select: true,
         options: [
            {label: '年', value: '年'},
            {label: '月', value: '月'},
            {label: '日', value: '日'}
        ]},
        
        {label : '币种', value:'hhh', prop:'currencyType', select: true,
        options: [
            {label: 'CNY', value: 'CNY'},{label: 'USD', value: 'USD'},
            {label: 'HKD', value: 'HKD'},{label: 'EUR', value: 'EUR'},
            {label: 'GBP', value: 'GBP'},{label: 'AUD', value: 'AUD'},
            {label: 'JPY', value: 'JPY'},{label: 'CAD', value: 'CAD'},
           
        ]},
        {label : '账号', value:'是', prop:'currentAccount',input: true}
      ],
      multipleSelection: [],
      showsec: true,
      applyId: this.$route.query.applyId,
      isUpload: false,
      fileUrl: [],
      filename: '',
      fileList:[],
      aurl: this.$downfile,
      fileupload: this.$uploadfile
    };
  },
  
  methods: {
    // 文件
     handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //上传成功
      uploadSuccess(response, file, fileList) {
        file.info = this.filename
        this.fileList = fileList
        let item = {}
        item.info = this.filename
        item.name = file.name
        item.filename = response.data.fileName
        item.url = response.data.filePath
        this.fileUrl.push(item)
        this.filename = ''
      },
    goback() {
      this.$router.go(-1)
      
    },
    selectType(val) {
     // 选择存款方式

     if(val == '定期') {
       this.showsec = false
     } else {
       this.showsec = true
     }
    },
      selectChange(val) {
        // 系统内外
           if(val == '系统内') {
              this.formList[4].options = [ 
                {label: '村镇银行', value: '村镇银行'},
                {label: '省外系统内-省级银行业存款类金融机构', value: '省外系统内-省级银行业存款类金融机构'},
                {label: '省外系统内-地市级银行业存款类金融机构', value: '省外系统内-地市级银行业存款类金融机构'},
                {label: '省外系统内-县级银行业存款类金融机构', value: '省外系统内-县级银行业存款类金融机构'},
                {label: '省外系统内-其他存款类金融机构', value: '省外系统内-其他存款类金融机构'},
              ]
              
           }else {
              this.formList[4].options = [
                    {label: '国有控股商业银行', value: '国有控股商业银行'},
                    {label: '全国性股份制商业银行', value: '全国性股份制商业银行'},
                    {label: '政策性银行', value: '政策性银行'},
                    {label: '城市商业银行', value: '城市商业银行'},
                    {label: '村镇银行', value: '村镇银行'},
                    {label: '其他银行业存款类金融机构', value: '其他银行业存款类金融机构'},
                    {label: '银行业非存款类金融机构', value: '银行业非存款类金融机构'},
                    {label: '证券业金融机构', value: '证券业金融机构'},
                    {label: '保险业金融机构', value: '保险业金融机构'},
                    {label: '交易及结算类金融机构', value: '交易及结算类金融机构'},
                    {label: '特殊目的载体金融机构', value: '特殊目的载体金融机构'},
                    {label: '小额贷款公司', value: '小额贷款公司'},
                    {label: '金融控股公司', value: '金融控股公司'},
                    {label: '境内其他金融机构', value: '境内其他金融机构'},
                    {label: '境外同业', value: '境外同业'}
              ]
           }
    },
    cancleNext() {
      this.nextManager = false;
    },
   
      handleSelectionChange(val) {
        this.multipleSelection = []
        this.multipleSelection = val;
          //选中下一办理人id
      this.nextUserId = val[0].id
      this.$message({
        type: 'success',
        message: '选中成功'
      })
      
      this.step = 2
      },
      selectState(val) {
        if(val.state == 1 || val == '1') {
          return '已审批'
        }
        else{
          return '审批不通过'
        }
      },
    selectNextUser(row) {
      //选中下一办理人id
      this.nextUserId = row.id
      this.$message({
        type: 'success',
        message: '选中成功'
      })
      this.step = 2
      
    },
    getInterBankInfo(val) {
      //交易详情
      this.axios.get('bondApplyFlow/selectOne', {params: {
        applyId: val,
        model: '存放同业交易'
      }}).then((res) => {
        let {storeInnerBankTradeApply,authorizationFiles, user, list} = res.data.data
        this.TypeData = storeInnerBankTradeApply
        this.reason = this.TypeData.reason
        if(this.TypeData.warn == null || this.TypeData.warn == '') {

        } else {
          this.tishiMessage = this.TypeData.warn
        }
          if(this.TypeData.depositMethod == '活期') {
            this.showsec = true
            this.formData2 = storeInnerBankTradeApply
          } else {
            this.showsec = false
            this.formData = storeInnerBankTradeApply
            this.formData.dan = '日'
          }
        
        this.formData1 = user
        // this.TypeData.transactionType = storeInnerBankTradeApply.transactionType  此法不行？？？
         if(authorizationFiles != '') {
            this.fileList = authorizationFiles
            this.fileUrl = authorizationFiles
            this.isUpload = true
            this.canUpload = false
            if(this.$route.query.currentRole == '交易员') {
              this.canUpload = true
            }
            
          }
        this.recordShen = list
      })
    },
      nopass() {
        
               this.$prompt('请输入驳回原因', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
          
              }).then( value => {
               
                // 审核不通过
                  if(this.step == 1 ){
                    this.nextUserId = null
                  }
                  let userId;
                    if(this.TypeData.depositMethod == '活期') {
                      userId = this.formData2.userId
                    } else {
                      userId = this.formData.userId
                    }
                    let data = {
                    flowId: parseInt(this.$route.query.flowId),
                    userId: userId,
                    flowState: this.flowState,
                    nextUserId: this.nextUserId,
                    nextRole: this.nextRole,
                    state: 2,
                    content: value.value
                  }
                  this.axios.post('bondApplyFlow/approval', data).then(res => {
                    if(res.data.code ==200 ){
                      this.$message({
                        type: 'success',
                        message: '驳回成功'
                      })
                      this.$router.go(-1)
                    }
                  })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消输入'
                });       
              });
    },
    delFile(index) {
      this.fileList.splice(index, 1)
    //  this.fileUrl.splice(index, 1)
    },
    submitPost() {
      if(this.isUpload && this.step == 0) {
          
        //上传成功后修改状态
              if(this.fileList.length == 0) {
                    this.$message({
                    type: 'warning',
                    message: '请先上传文件'
                  })
                  return
              }
              let paraml = {
                fileUrl: JSON.stringify(this.fileUrl),
                applyId: parseInt(this.$route.query.applyId)
              }
            this.axios.post('storeInnerBankTradeApply/updateUploadState', paraml).then(res => {
                this.$message({
                  type: 'success',
                  message: '提交成功'
                })
                this.step = 1
                this.getNextUser2()
            })
         }
      
      if(this.step == 1){
        //查看是否有下一办理人
          this.getNextUser2()
      }
    
    },
    addApply() {
           //获取下一办理人成功
          //提交交易申请
          let userId = ''
          if(this.TypeData.depositMethod == '活期') {
            userId = this.formData2.userId
          } else {
            userId = this.formData.userId
          }
           let data = {
            flowId: parseInt(this.$route.query.flowId),     
            flowState: this.flowState,
            nextUserId: this.nextUserId,
            nextRole: this.nextRole,
            state: 1,
            content: '通过',
            userId: userId
          }
          this.axios.post('bondApplyFlow/approval', data).then(res => {
            if(res.data.code ==200 ){
              this.$message({
                type: 'success',
                message: '审批成功'
              })
              this.$router.go(-1)
            }
          })
    },
    getNextUser2() {
      let data = {
        roleName: this.$route.query.currentRole,
        flowId: this.$route.query.flowId
      }
      this.axios.get('storeInnerBankTradeApply/getNextUser', {params: data}).then(res => {
        let response = res.data.data
      
        if(response.flowState == '1' || response.flowState == 1) {
            this.$message({
              type: 'warning',
              message: '提交下一办理人'
            })
            this.flowState = response.flowState
            this.nextRole  = response.nextRole
            this.nextManager = true
            this.tableData = response.nextUser
        }else {
         
             this.flowState = response.flowState
            if(response.nextRole != undefined || response.nextRole != null){
            
               this.nextRole  = response.nextRole
              this.nextUserId = response.nextUser[0].id
            }else {
              this.nextRole = null
              this.nextUserId = null
            }
           this.addApply()
        }
      })
    },
    
    close() {
      this.$router.go(-1);
    },  
  },
  mounted() {
    
    if(this.$route.query.flowState == '3') {
      }else {
            //省联社 提交文件
        if(this.$route.query.flowState == '1' && this.$route.query.currentRole == '交易员') {
          this.isUpload = true
          this.step = 0
          this.btntext = '提交'
        }
      }
    //申请人信息
    let user = JSON.parse(sessionStorage.getItem('user'))
    this.flowState = this.$route.query.flowState
    this.formData1 = user
    this.getInterBankInfo(this.applyId)
  },
};
</script>

<style lang="scss">
#viewNostro {
  // .el-dialog__wrapper{
  //       background: rgba(255,255,255,0.5);
  // }
    .shengl{
      margin: 20px auto;
      td{
        border:1px solid white;
        padding: 8px;
        .el-upload-list{
          display: none;
        }
        .upload-demo{
          display: inline;
        }
        .el-input__inner{
          background: transparent;
          color:white;
          border: 0
        }
      }
    }
    .upload-demo{
    display: flex;
    .el-upload{
      width:30%
    }
    .el-upload-list{
      width: 70%;
      .el-upload-list__item-name{
        color: white;
      }
    }
  }
  .el-input__inner{
    background: transparent;
    color: white;
    border: 0
  }

  .tableBox {
    padding-top: 10;
    color: white;
    .formlist{
      .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            box-sizing: border-box;
            background: rgba(53,58,58,0.8);
            color:white;
        }
        .el-form-item__content{
          width:55%;
          text-align: center;
          box-sizing: border-box;
          background: rgba(53,58,58,0.55);
          
        }
      }
    }
    .el-table__empty-text{
      color:white;
    }
    .tableTitle {
      line-height: 36px;
      padding-left: 20px;
      margin: 12px 0;
    }
    table {
      
      border: 1px solid white;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
       .el-table tr{
          background: transparent;
      }
      // margin-bottom: 20px;
      tr {
        td {
          
          &:nth-child(odd) {
            background: rgba(53, 58, 58, 0.55);
          }
          &:nth-child(even) {
            background: rgba(53, 58, 58, 0.55);
          }
        }
      }
    }
    .riskTip {
      .fxtq {
        margin-bottom: 20px;
      }
      .fxcon {
        border: 1px solid white;
        background-color: #4d534e;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-top:20px;
    }
  }
  .DiaFxcon {
    background-color: white;
    padding: 20px 10px;
    margin-bottom: 20px;
  }
       .el-radio-group{
    width:100%;
    height: 320px;
    overflow-y: scroll;
    .el-radio{
      margin-bottom: 15px;
      width: 100%;
      display: block;
       .el-radio__label {
        width: 80%;
        display: inline-block;
          
        .user_name, .user_part {
              padding: 15px;
              width: 48%;
              display: inline-block;
              text-align: center;
              border: 1px solid #efefef
            }
      }  
     
    }
     .el-radio+.el-radio{
        margin-left: 0
      }
  }
}
</style>
